<template>
	<view>
		<view :class="{'item':!on,'item-on':on,'u-border-bottom':on}" class="list" @tap="goProduct(info.id)">
			<view :class="{'image-on':on}">
				<image :src="info.image" :class="{'image-on':on,'image':!on}" />
			</view>
			<view :class="{'info-on':on,'info':!on}">
				<view class="u-line-1">{{info.storeName}}</view>

				<view class="wm_weight_flod">
					<priceStyle :info="info" />
				</view>
				<view class="u-flex u-row-between sales" style="font-size: 28rpx;" >
					<view style="font-size: 28rpx;text-decoration: line-through;color: #a5a5a5;">￥{{info.costPrice}}</view>
					<view>销量:{{info.sales+info.virtualSales}}{{info.unit}}</view>
					
				</view>
				<!-- <view class="u-flex u-row-between sales" style="font-size: 22rpx;" v-if='add'>
					<view class=""></view>
					<view style='background-color: #a9dcff;padding: 10rpx 20rpx;color: #fff;border-radius: 20rpx;'
						@tap.stop="addshop(info.id,info.storeName)">添加
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import priceStyle from '@/components/priceStyle.vue'
	import {
		goNav
	} from '@/lib/Comment.js'
	export default {
		components: {
			priceStyle
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			add: {
				type: Number,
				default: 0
			},
			on: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			addshop(id, name) {
				let pages = getCurrentPages(); // 当前页页⾯实例
				let nowPage = pages[pages.length - 1]; //当前页⾯实例
				let prevPage = pages[pages.length - 3]; // 上一页面实例
				// 需要返回 上一页的数据 Object
				let object = {
					name: name,
					id: id
				};
				prevPage.$vm.prevDateFun(object) // 调用上一页 定义的方法
				// 返回 上一页
				uni.navigateBack({
					delta: 2 // 可以不写，默认值为 1
				})

			},
			goProduct(id) {
				if (!this.add) {
					goNav("/pages/sub/store/detail?id=" + id)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-on {
		//padding: 20rpx 0;
		border-radius: 25rpx;
	}

	.item {
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}

	.list {
		font-size: 30rpx;
		color: #3b3b3b;
		background-color: #FFFFFF;

	}

	.image {
		width:100%;
		height: 360rpx;
		display: block;
		border-radius: 15rpx 15rpx 0 0;
	}

	.image-on {
		width:360rpx;
		height: 360rpx;
		display: block;
		border-radius: 20rpx;
		
	}

	.info-on {
		min-height: 180rpx;
		padding: 0 20rpx;

	}

	.info {
		padding: 20rpx;
        background-color: #f6f6f6;
		line-height: 50rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.level-on {
		height: 40rpx;
	}

	.level {}

	.sales {
		color: #a5a5a5;
	}

	.text {
		background-color: $theme-color;
		font-size: 26rpx;
		padding: 5rpx 10rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		color: #5e5e5e;
	}

	.button {
		line-height: 50rpx;
		background-color: $base-color;
		padding: 0 20rpx;
		border-radius: 25rpx;
		color: #FFFFFF;

	}
</style>
